<template>
  <div>
    <div class="search">
      <input type="text" placeholder="请输入你要搜索的城市名称" class="search-input"/>
    </div>
    <div class="search-content">
      <ul>
  	    <li class="search-item">西安</li>
  	    <li class="search-item">北京</li>
  	    <li class="search-item">广州</li>
  	    <li class="search-item">广州</li>
  	    <li class="search-item">广州</li>
  	    <li class="search-item">广州</li>
      </ul>
    </div>
  </div>
</template>

<script>
	export default {
		name: 'CitySearch'
	}
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl'
.search
  background $bgColor
  height 1.57rem
  text-align center
  .search-input
    margin-top .2rem
    padding 0 1em
    box-sizing border-box
    width 80%
    height 1.17rem
    background #fff
    border none
    border-radius .5rem
.search-content
  display none   
  .search-item
    height 1.5rem
    text-indent 2em
    line-height 1.5rem
    box-sizing border-box
    border-bottom 1px solid #ccc
</style>
